<template>
  <div class="index">
    <go-top></go-top>
    <div class="main" >
      <!-- 主体 -->
      <div>
        <!-- 轮播图 -->
        <swiper
          type="card"
          ref="mySwiper"
          class="swiper"
          :options="swiperOption"
        >
          <swiper-slide
            ><img
              src="https://upload-bbs.mihoyo.com/upload/2022/07/28/b148e9beece1e89b3f9fc92e02059a2c_5987744946079885028.jpg"
              alt=""
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://upload-bbs.mihoyo.com/upload/2022/07/28/4bf83867c7ac48aa5c984873d7c83037_6504684076385372809.jpg"
              alt=""
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://upload-bbs.mihoyo.com/upload/2022/07/28/73555434a3f5b0b5445b5560a9fcea3d_2973498607263882993.jpg"
              alt=""
          /></swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <div class="message">
          <comment-model :Pdata="Pdata[0]" v-for="i in 10" :key="i" />
        </div>
        <div class="btn"><p class="more">加载更多++</p></div>
      </div>
      <div>

      </div>
    </div>
    <div class="alide">
      <!-- 侧边栏 -->
      <div class="writer">
        <div class="level">
          <span>创作等级未解锁</span>
          <span>进入创作中心<img src="@/assets/icon4.svg" alt="" /></span>
        </div>
        <div>
          <div class="btn">
            <div>
              <img src="@/assets/icon4.svg" alt="" /><span>发表帖子</span
              ><img src="@/assets/icon5.svg" alt="" />
            </div>
            <p>讨论、分析、攻略、同人文</p>
          </div>
          <div class="btn">
            <div>
              <img src="@/assets/icon6.svg" alt="" /><span>发布图片</span
              ><img src="@/assets/icon5.svg" alt="" />
            </div>
            <p>绘画、COS、手工、表情包</p>
          </div>
        </div>
      </div>
      <div>
        <!-- 二维码 -->
        <div class="QR">
          <img
            src="https://img-static.mihoyo.com/new_qrcode/qrcode_ys.png"
            alt=""
          />
          <div>
            <p>扫码下载米游社App</p>
            <p>了解提瓦特最新资讯</p>
          </div>
        </div>
        <div class="Aswiper">
          <!-- 小轮播图  -->
          <swiper class="swiper" :options="swiperOption1">
            <swiper-slide>
              <img
                src="https://upload-bbs.mihoyo.com/pc_ad/pc_ad_ys_game_record2.jpg"
                alt=""
              />
            </swiper-slide>
            <swiper-slide>
              <img
                src="https://upload-bbs.mihoyo.com/pc_ad/ys_signin.jpg"
                alt=""
              />
            </swiper-slide>
            <swiper-slide>
              <img
                src="https://upload-bbs.mihoyo.com/upload/2022/07/12/47d82d6cfff1199b47f592e2e0687567_6062346148197936188.jpg"
                alt=""
              />
            </swiper-slide>
          </swiper>
        </div>
        <div class="off">
          <!-- 官方资讯 -->
          <div class="title">
            <span>官方资讯</span>
            <span>更多</span>
          </div>
          <ul>
            <div>
              <img
                src="https://upload-bbs.mihoyo.com/upload/2022/07/27/76387920/293e628bb1b12df0e8d5ab1ed8a7013d_3615888153474855144.png?x-oss-process=image//resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png"
                alt=""
              />
              <p class="hot">【转发抽奖】烟绯生日活动开启！</p>
            </div>
            <li>
              <span>活动</span>
              <p>【转发抽奖】久岐忍生日活动开启!</p>
            </li>
            <li>
              <span>活动</span>
              <p>【转发抽奖】久岐忍生日活动开启!</p>
            </li>
            <li>
              <span>活动</span>
              <p>【转发抽奖】久岐忍生日活动开启!</p>
            </li>
          </ul>
        </div>
        <div class="hotTalk">
          <div class="title">
            <span>每日热榜</span>
            <span>更多</span>
          </div>
          <ul>
            <li>
              <div class="img" style="background-image:url(https://upload-bbs.mihoyo.com/upload/2022/06/04/253444466/f8c71c2ca793e09252b0b2e483dbb73c_6791292097792595601.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg)"></div>
              <div>
                <p><span>同人图</span>【水夜叉】不知道她叫什么名字，就叫她老婆吧字，就叫她老婆字，就叫她老婆</p>
              </div>
            </li>
            <li>
              <div class="img" style="background-image:url(https://upload-bbs.mihoyo.com/upload/2022/06/04/253444466/f8c71c2ca793e09252b0b2e483dbb73c_6791292097792595601.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg)"></div>
              <div>
                <p><span>同人图</span>【水夜叉】不知道她叫什么名字，就叫她老婆吧字，就叫她老婆字，就叫她老婆</p>
              </div>
            </li>
            <li>
              <div class="img" style="background-image:url(https://upload-bbs.mihoyo.com/upload/2022/06/04/253444466/f8c71c2ca793e09252b0b2e483dbb73c_6791292097792595601.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg)"></div>
              <div>
                <p><span>同人图</span>【水夜叉】不知道她叫什么名字，就叫她老婆吧字，就叫她老婆字，就叫她老婆</p>
              </div>
            </li>
          </ul>
          <!--  -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import CommentModel from '@/components/CommentModel.vue';
import GoTop from '@/components/GoTop.vue';
export default {
  name: "swiper-example-pagination",
  title: "Pagination",
  components: {
    Swiper,
    SwiperSlide,
    CommentModel,
    GoTop,
  },
  data() {
    return {
      Pdata:[{
        avatar:'https://img-static.mihoyo.com/avatar/avatar10014.png',
        userName:'西风快报员',
        userLevel:17,
        dataTime:1659403140000,
        class:'官方',
        module:'原神',
        title:'「焰色天河」祈愿：「琉焰华舞·宵宫(火)」概率UP！',
        article:'活动期间，旅行者可以在活动祈愿中获得更多角色与武器，组建强大的队伍！',
        images:[
          'https://upload-bbs.mihoyo.com/upload/2022/07/26/75276539/2508d400ba2e8494867e05259d04b6cd_4432750527329040643.jpg?x-oss-process=image//resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg',
          'https://upload-bbs.mihoyo.com/upload/2022/07/26/75276539/b715282d3609129d4f8ae178091286a1_3323430204500352293.png?x-oss-process=image//resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png',
        ],
        pageView:300000,
        comment:300000,
        like:30000,
    }],
      swiperOption: {
        effect: "coverflow",
        speed: 3000,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOption1: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
      },
    };
  },
  methods: {
   scrollEvent(n){
      console.log(n)
    }
  },
};
</script>

<style scoped>
.index {
  display: flex;
  width: 65%;
  /* background: black; */
  justify-content: space-between;
  margin: 66px auto 60px;
  padding-top: 30px;
}
.main {
  margin-left:auto ;
  width: 640px;
  margin-right: 25px;
}
.swiper {
  text-align: center;
  width: 100%;
  height: 254px;
  border-radius: 10px;
  background: #fff;
}
.swiper img {
  width: 80%;
  border-radius: 10px;
}
.swiper-button-prev,
.swiper-button-next {
  font-size: 12px;
  color: #fff;
  background: #000;
  opacity: 0.5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.message{
  box-sizing: border-box;
  padding: 20px;
  margin-top: 30px;
  border-radius:10px;
  width: 100%;
  background: #fff;
}
.btn{
  text-align: center;
}
.more{
  margin: 0 auto;
  width: 100px;
  padding: 20px ;
  background: #1fbbf4;
  border-radius:50px ;
  color: white;
  margin-top: 10px;
}
.alide {
  width: 280px;
  margin-right:auto;
}
.alide .writer {
  background: #fff;
  padding: 10px 10px;
  border-radius: 10px;
  text-align: center;
}
.alide .writer .level {
  position: relative;
  width: 220px;
  padding: 0px 20px;
  line-height: 48px;
  border-bottom: 1px dashed #ccc;
}
.alide .writer .level span:first-child {
  font-size: 14px;
  margin-right: 30px;
}
.alide .writer .level span:last-child {
  font-size: 13px;
  color: #999;
}
.alide .writer .level img {
  width: 14px;
  position: absolute;
  /* background: #000; */
  top: 50%;
  transform: translateY(-50%);
}
.alide .writer .btn {
  margin: 20px 0;
}
.alide .writer .btn > div {
  width: 120px;
  margin: 20px auto 0;
  background: #ffe14c;
  color: #663c0f;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 4px;
  position: relative;
}
.alide .writer .btn > div span {
  margin-left: 30px;
}
.alide .writer .btn div > img:first-child {
  width: 24px;
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}
.alide .writer .btn div > img:last-child {
  width: 14px;
  margin-left: 10px;
}
.alide .writer .btn p {
  margin: 5px;
  font-size: 12px;
  color: #999;
}
.alide .QR {
  width: 260px;
  padding: 10px;
  margin-top: 30px;
  background: #fff;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.alide .QR img {
  width: 100px;
  margin-right: 5px;
}
.alide .QR > div > p:first-child {
  color: #1fbbf4;
}
.Aswiper {
  margin-top: 10px;
}
.Aswiper .swiper {
  border-radius: 10px;
}
.Aswiper .swiper .swiper-slide-active {
  height: 160px;
}
.Aswiper img {
  width: 280px;
}
.off {
  margin-top: -80px;
  background: #fff;
  padding: 0px 20px 20px;
  border-radius: 10px;
}
 .title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}
 .title span:last-child {
  font-size: 13px;
  color: #999;
}
.off ul {
  margin-top: 20px;
}
.off ul div {
  position: relative;
  margin-bottom: 12px;
  border-radius: 10px;
}
.off ul div img {
  width: 240px;
  border-radius: 10px;
}
.off ul div .hot {
  box-sizing: border-box;
  width: 240px;
  font-size: 14px;
  padding: 8px 4px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  position: absolute;
  bottom: 0;
  z-index: 100;
  border-radius: 10px;
}
.off ul li {
  display: inline-flex;
  margin-bottom: 8px;
}
.off ul li span {
  padding: 1px 2px;
  font-size: 12px;
  color: white;
  background: #c3ccd9;
  border-radius: 4px;
  margin-right: 10px;
}
.off ul li p {
  width: 200px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hotTalk{
  margin-top:14px ;
  background: #fff;
  padding: 0px 20px 10px;
  border-radius: 10px;
}
.hotTalk ul li{
  /* width: 240px; */
  margin: 20px 8px;
  display: flex;
}
.hotTalk ul li .img{
  min-width: 75px;
  height: 50px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius:10px;
  margin-right:10px;
}
.hotTalk ul li div{
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotTalk ul li div span{
  font-size: 12px;
  color: orange;
  border: 1px solid orange;
  border-radius: 6px;
  padding: 1px 1px;
  margin-right:8px;
}
.hotTalk ul li div p{
  margin:  0 ;
  font-size: 13px;
  line-height: 25px;
  overflow: hidden;
}
</style>